<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/font/iconfont.css}">
    <link rel="stylesheet" th:href="@{/static/css/public.css}">
    <link rel="stylesheet" th:href="@{/css/cooperation.css}">
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
</head>
<style>
    .container {
        height: 92vh;
    }
    .head {
        background-color: #FFFFFF;
        font-size: 12px;
        line-height: 36px;
        padding-left: 20px;
        border-bottom: 1px solid #f5f5f5;
    }
    .layui-input-block {
        width: 120px;
        margin-left: 0;
    }
    .layui-form-label {
        width: auto;
        display: inline-block;
    }
    .layui-inline {
        display: flex;
        align-items: center;
    }
    .layui-form-item {
        display: flex;
        align-items: center;
    }
    .layui-table[lay-skin=line] {
        border-width: 0;
    }
    .layui-table td, .layui-table th{
        line-height: 30px;
    }
</style>
<body>
<div class="container">
    <div style="background-color: #FFFFFF; height: 100%;overflow-y: auto;">
        <div class="head">
            <span>教学概况</span>
            <span>>教学概况列表</span>
        </div>
        <div class="content" style="padding:20px;">
            <div class="tableBtn">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">部门</label>
                            <div class="layui-input-block">
                                <select name="interest" lay-filter="aihao">
                                    <option value=""></option>
                                    <option value="0">写作</option>
                                    <option value="1">阅读</option>
                                    <option value="2">游戏</option>
                                    <option value="3">音乐</option>
                                    <option value="4">旅行</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">专业</label>
                            <div class="layui-input-block">
                                <select name="interest" lay-filter="aihao">
                                    <option value=""></option>
                                    <option value="0">写作</option>
                                    <option value="1">阅读</option>
                                    <option value="2">游戏</option>
                                    <option value="3">音乐</option>
                                    <option value="4">旅行</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-block">
                                <input type="text" name="title" placeholder="请输入姓名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">搜索</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <table class="layui-table" lay-skin="line" id="test3"></table>
            <div id="page"></div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../layui/layui.all.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;
        var $ = layui.jquery;
    });
    function show(id) {
        window.location.href = './teacherDetail.html'
    }
    initTableData(1, 10)
    // 获取数据
    function initTableData(page, limit) {
        $.ajax({
            url: "http://127.0.0.1:8093/teacherCompleteData/findAllTeacherData?page=" + page + "&limit=" + limit,
            type: "get",
            dataType: "json",
            success: function(data) {
                // 初始化table数据
                tableRender(data.data);
                if (page === 1) {
                    // 初始化分页
                    pageRender(data.count)
                }
            }
        })
    }
    // 初始化分页
    function pageRender(count) {
        var laypage = layui.laypage;
        var table = layui.table;
        laypage.render({
            elem: 'page',
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
            curr: 1 ,//设定初始在第 1 页,
            limits: [10, 20, 30, 40, 50],
            groups: 5, //只显示 1 个连续页码
            count: count,
            jump: function(obj, first) {
                if (!first) {
                    initTableData(obj.curr, obj.limit)
                }
            }
        });
    }
    // 初始化table
    function tableRender(data) {
        var table = layui.table;
        table.render({
            elem:'#test3',
            cols: [
                [
                    { title: '序号', type: 'numbers'},
                    { field: 'teacherName', title: '老师姓名',},
                    { field: 'idCard', title: '身份证'},
                    { field: 'jobNumber', title: '工号'},
                    { field: 'gender', title: '性别', },
                    { field: 'age', title: '年龄'},
                    { field: 'photoUrl', title: '头像'},
                    { field: 'nation', title: '民族'},
                    { field: 'mating', title: '是否已婚'},
                    { field: 'politicalAffiliation', title: '政治面貌'},
                    { field: 'administrationOffice', title: '所属行政管理机构'},
                    { field: 'AdministrativeDepartment', title: '所属部门'},
                    { field: 'employeeCategory', title: '职工类别'},
                    { field: 'jobAge', title: '工龄'},
                    { field: 'position',title:'职位' },
                    { field: 'post',title:'岗位' },
                    { field: 'rank',title:'职级' },
                    { field: 'coursesOffered',title:'主授课程' },
                    { field: 'joinTime',title:'入职时间' },
                    { field: 'correctionDate',title:'转正日期' },
                    { field: 'departureDate',title:'离职日期' },
                    { field: 'serviceLife',title:'服务年限' },
                    { field: 'highestEducation',title:'最高学历' },
                    { field: 'graduateSchool',title:'毕业院校' },
                    { field: 'major',title:'专业' },
                    { field: 'academicDegree',title:'学位' },
                    { field: 'graduationTime',title:'毕业时间' },
                    { field: 'homeAddress',title:'家庭地址' },
                    { field: 'contactNumber',title:'联系电话' },
                    { field: 'mailbox',title:'邮箱' },
                    { field: 'emergencyContact',title:'紧急联系人' },
                    { field: 'relationship',title:'与联系人关系' },
                    { field: 'emergencyContactNumber',title:'联系人电话' },
                    { field: 'accountCharacter',title:'户口性质' },
                    { field: 'certificate',title:'是否有教室资格证' },
                    { field: 'certificateTime',title:'取得证书时间' },
                    { field: 'title',title:'职称' },
                    { field: 'titleTime',title:'取得职称时间' },
                    { field: 'otherTitle',title:'其他证书' },
                    { field: 'socialSecurityAccount',title:'社保账号' },
                    { field: 'purchaseDate',title:'申购日期' },
                    { field: 'stopDate',title:'停保日期' },
                    { field: 'providentFundAccountNumber',title:'公积金账号' },
                    { field: 'providentFundAccountNumberPurchaseDate',title:'社保账号' },
                    { field: 'socialSecurityAccount',title:'公积金申购日期' },
                    { field: 'providentFundAccountNumberStopDate',title:'公积金停保日期' },
                    { field: 'contractType',title:'合同类型' },
                    { field: 'contractNumber',title:'合同编号' },
                    { field: 'contractStartTime',title:'合同开始时间' },
                    { field: 'contractEndTime',title:'合同结束时间' },
                    { field: 'salary',title:'工资' },
                    { field: 'salaryChange',title:'工资变动情况' },
                    { field: 'transferRecord',title:'调职记录' },
                    { field: 'accommodation',title:'是否住宿' },
                    { field: 'roomNumber',title:'房间号' },
                    { field: 'startWorkingInUniversitiesTime',title:'开始从事高校工作时间' },
                    { field: 'startAdministrationWorkingInUniversitiesTime',title:'开始从事高校管理工作时间' },
                    { field: 'infoJudge',title:'身份证校验' }
                ]
            ],
            data:data
        })
    }
</script>